<template>
  <div class="item-style6">
    <base-item title="人员接处情况">
      <template #content>
        <div class="grid grid-box">
          <div v-for="(item,index) in list" :key="index"
               class="flex flex-justify-content-between flex-align-center grid-item">
            <div class="left">
              <div class="text1 font-18">{{ item.name }}</div>
              <div class="count flex mt-5">
                {{ item.num }}{{ item.unit }}
              </div>
            </div>
            <img :src="item.url" class="img1" alt="">
          </div>
        </div>
      </template>
    </base-item>
  </div>
</template>

<script setup lang="ts">
//组件
import useHomeStore from "@/store/modules/home/home";

//接口


//api
import {reactive, ref} from 'vue';
import BaseItem from "@/views/home/compoments/baseItem.vue";
import {getAssetsFile} from "@/utils/getAssets";

//data
const list = ref([
  {
    name: '本日热线接处中心工作人员数',
    unit: '人',
    num: '',
    url: getAssetsFile('img/home', 'brrxjczx.png'),
    value: 'inPlaceNum',
  },
  {
    name: '服务过程满意率',
    unit: '%',
    num: '',
    url: getAssetsFile('img/home', 'fwgc.png'),
    value: 'servMyd',
  },
  {
    name: '本日现场到岗人员数',
    unit: '人',
    num: '',
    url: getAssetsFile('img/home', 'brxcdg.png'),
    value: 'totalNum',
  },
  {
    name: '本日到岗管理人员数',
    unit: '人',
    num: '',
    url: getAssetsFile('img/home', 'brdggl.png'),
    value: 'managerNum',
  },
])
const homeStore = useHomeStore()
/*
函数
*/

/**************************接口函数**************************/


/**************************操作函数**************************/
const getData = () => {
  list.value.forEach((item) => {
    item.num = homeStore.itemStyle6Data[item.value]
  })
  console.log(homeStore.itemStyle6Data)
}
defineExpose({
  getData
})
</script>

<style lang="scss" scoped>
.item-style6 {
  .grid-box {
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;

    .grid-item {
      background: linear-gradient(89.61deg, rgba(221, 234, 254, 1) 0.82%, rgba(255, 255, 255, 1) 101.93%);
      padding: 5px 0 5px 20px;
      border-radius: 10px;
      box-sizing: border-box;

      .img1 {
        display: block;
        width: 120px;
        height: 120px;
      }

      .count {
        font-size: 20px;
        font-weight: bold;
        color: rgb(24, 144, 255);
      }
    }

    .left {
    }
  }
}
</style>
